<template>
    <div class="rightbox">

        <!--快速搜索-->
        <div class="search">
            <el-input v-model="input2"
                placeholder="快速搜索"
                style="padding-top:5px"
                :prefix-icon="Search" />
        </div>
        <!--关键字卡片-->
        <div class="card">
            <el-row :gutter="24">
                <el-col :span="24">
                    <el-card class="keyword">
                        <el-button v-for="button in filters"
                            :key="button.text"
                            class="button"
                            size="small"
                            @click="onClickKeyWord"
                            text>{{ button.text }}</el-button>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <!--排序方法-->
        <div style="border-top: 1px solid var(--el-border-color)"></div>
        <div class="operater">
            <el-row :gutter="24">
                <el-col :span="6">最新</el-col>
                <el-col :span="9">使用量</el-col>
                <el-col :span="9">收藏量</el-col>
            </el-row>
        </div>
        <div style="border-top: 1px solid var(--el-border-color)"></div>

        <!--展示卡片-->
        <div class="showcard">

            <el-card class="cardone"
                v-for="(item,i) in cardTable"
                :key="i">
                <el-row :gutter="24">
                    <el-col :span="10"
                        style="padding-left:5px;padding-right:0px">{{item.text}}</el-col>
                    <el-col :span="7"
                        style="padding-left:5px">
                        <el-button type="warning"
                            :icon="Star"
                            circle />
                    </el-col>
                    <el-col :span="7"
                        style="padding-left:5px">
                        <el-button type="success"
                            :icon="Check"
                            circle />
                    </el-col>
                </el-row>
                <div class="bottom">
                    <el-row :gutter="24">
                        <el-col :span="24">{{item.type}}</el-col>
                    </el-row>
                </div>
                <div><br></div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
// import { sendMsgToGetEquipmentCarbonFactorInfor } from '@/utils/interaction.js'
import { Check, Search, Star } from '@element-plus/icons-vue'
import { ref } from 'vue'

const cardNameOne = ref('One')

const cardNameTwo = ref('Two')
const cardNameThree = ref('Three')
const cardNameFour = ref('Four')
const cardNameFive = ref('Five')

// 搜索关键字
const filters = ref([
  {
    text: '变压器',
    type: ''
  },
  {
    text: '电抗器',
    type: ''
  },
  {
    text: '电容器',
    type: ''
  }
])

//卡片展示内容
const cardTable = ref([
  {
    text: '油浸式变压器',
    type: '型号：a-x'
  },
  {
    text: '干式变压器',
    type: '型号：b-x'
  }
])

// 关键字点击事件
const onClickKeyWord = () => {
  // sendMsgToGetEquipmentCarbonFactorInfor()

  if (cardTable.value.length < 4) {
    cardTable.value.push({
      text: '油浸式变压器',
      type: '型号：a-x'
    })
  }
}
</script>


<style lang="scss" scoped>
.rightbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column !important;
  justify-content: flex-start;
  align-content: flex-start;
  position: relative;
  .search {
    width: 100%;
    height: 35px;
  }
  .card {
    width: 100%;
    height: 90px;
    margin-left: 1px;
    display: flex;
    flex-direction: row !important;

    .keyword {
      width: 100%;
      height: 90px;
      .button {
        padding: 5px;
      }
    }
  }
  .operater {
    width: 190px;
    height: 40px;
    margin-top: 10px;
  }
  .showcard {
    .bottom {
      margin-left: -13px;
      margin-top: 13px;
      line-height: 12px;
      font-size: 12px;
      color: #999;
    }
  }
}
</style>